﻿
/*超大屏PC平台*/
@container (min-width : 2448px)
{ /*属性渲染容器属性标签样式*/
    .bootstrapFormViewerPropertyLabel
    {
        white-space: nowrap;
    }
}

/*普通屏PC平台*/
@container (min-width : 1224px) and (max-width : 2448px)
{
    /*属性渲染容器属性标签样式*/
    .bootstrapFormViewerPropertyLabel
    {
        white-space: nowrap;
    }
}

/*平板平台*/
@container (min-width : 667px) and (max-width : 1224px)
{
    /*表单视图容器样式*/
    .bootstrapFormViewerContainer, .bootstrapFormViewerTopContainer
    {
        flex-wrap: nowrap;
        flex-direction: column;
    }
    /*属性渲染容器样式*/
    .bootstrapFormViewerPropertyContainer
    {
        flex-wrap: nowrap;
        flex-direction: column;
    }
}

/*手机平台*/
@container (max-width : 667px)
{
    /*表单视图容器样式*/
    .bootstrapFormViewerContainer, .bootstrapFormViewerTopContainer
    {
        flex-wrap: nowrap;
        flex-direction: column;
    }
    /*属性渲染容器样式*/
    .bootstrapFormViewerPropertyContainer
    {
        flex-wrap: nowrap;
        flex-direction: column;
    }
}

/*紧凑表单属性容器样式*/
.bootstrapSearchPanelPropertyContainerSmall
{
    width: 25ic;
}

/*中等表单属性容器样式*/
.bootstrapSearchPanelPropertyContainerMedium
{
    width: 35ic;
}

/*宽松表单属性容器样式*/
.bootstrapSearchPanelPropertyContainerBig
{
    width: 45ic;
}

/*媒体视图容器的样式*/
.mediaViewerContainer
{
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    gap: var(--mediaViewerContainerGap);
}

/*媒体封面样式*/
.mediaCover
{
    cursor: pointer;
    flex-grow: 1;
}

/*图片封面样式*/
.imageCover
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*表单视图顶容器样式*/
bootstrapFormViewerTopContainer
{
    container-type: inline-size;
}

/*表单视图容器样式*/
.bootstrapFormViewerContainer, .bootstrapFormViewerTopContainer
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gapMedium);
}

/*属性渲染容器样式*/
.bootstrapFormViewerPropertyContainer
{
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    gap: var(--gapMedium);
}

/*属性渲染容器元素样式*/
.bootstrapFormViewerPropertyItem
{
    flex-grow: 1;
    flex-wrap: wrap;
}

/*属性渲染容器属性标签样式*/
.bootstrapFormViewerPropertyLabel
{
}

/*属性渲染容器属性文字样式*/
.bootstrapFormViewerPropertyText
{
}

/*属性渲染容器元素说明样式*/
.bootstrapFormViewerPropertyDescription
{
    font-style: italic;
}

/*替换的弹窗提示框样式*/
.swal2-content
{
    white-space: pre-wrap;
}

/*替换的警告框样式*/
.alert
{
    margin-bottom: 0;
}

/*搜索面板容器样式*/
.bootstrapSearchPanelContainer
{
    display: flex;
    gap: var(--gapMedium);
    flex-wrap: nowrap;
}
